<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>请求json数据</title>
  <style>
    #info-table {
      margin-top: 10px;
      border: 1px black solid;
      border-collapse: collapse;
    }

    #info-table td {
      width: 100px;
      border: 1px black solid;
      text-align: center;
    }

  </style>
  <script type="text/javascript" src="/static/jquery-1.9.1.js"></script>
  <script type="text/javascript">
    $(function () {
      $("#test-btn").click(function () {

        $.ajax({
          type: 'GET',	// 请求方式
          contenType: "application/json;charset=UTF-8",
          url: 'http://localhost:8090/showinfo',
          success: function(resp) {
            //console.log(resp);
            // let userInfo = resp;
            let resultHtml = "";

            $.each(resp, function (key, info) {
              resultHtml += "<tr>";
              resultHtml +=  "<td>" + info['Name'] + "</td>";
              resultHtml +=  "<td>" + info['Age'] + "</td>";
              resultHtml +=  "<td>" + info['Addr'] + "</td>";
              resultHtml +=  "<td>" + info['Hobby'] + "</td>";
              resultHtml += "</tr>";
            });

            $("#info-body").html(resultHtml);
          },
          error: function(e) {
            console.log(e);
          }
        });
      });


    });
  </script>
</head>
<body>
<button id="test-btn">获取用户信息</button>

<table id="info-table">
  <thead>
  <tr>
    <td>姓名</td>
    <td>年龄</td>
    <td>住址</td>
    <td>爱好</td>
  </tr>
  </thead>
  <tbody id="info-body"></tbody>
</table>
</body>
</html>
